<template>
  <div style="background-color: white">

      <div ref="introPicRef">
          <IntroPic :picture="pic" title="书 籍 类 别"></IntroPic>
      </div>

    <div style="margin-left: 10%;margin-right: 10%;margin-top: 30px;display: flex;">
      <div style="height: max-content;width: 260px;" >
        <Broadside @me-change = "myChange" :class="navBarFixed === true ? 'navBarWrap1' :''"></Broadside>
      </div>
      <ClassifyList
              v-loading="loading"
              element-loading-text="数据正在加载..."
              style="margin-left: 10px;" :my-data="bookList" :class="navBarFixed === true ? 'navBarWrap2' :''"></ClassifyList>
    </div>

  </div>
</template>

<script setup>
import Broadside from "../Slither/Broadside.vue";
import ClassifyList from "../Composite/ClassifyList.vue";
import IntroPic from "../Slither/IntroPic.vue";

import axios from "../../axios/index.js";
import store from "../../store/index.js";
import {ElMessage} from "element-plus";
import {onMounted, onUnmounted, ref, watch} from "vue";
import {useRouter} from "vue-router";
import { useElementVisibility } from '@vueuse/core'

const router = useRouter();

let loading = ref(false)

let bookList = ref([])

let navBarFixed = ref(false)

const introPicRef = ref(null)
const introPicRefVisible = useElementVisibility(introPicRef)

// 过时代码
const handleScroll = ()=> {
  // 获取当前滚动条的位置
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  // 获取页面总高度
  const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);

  // 获取当前窗口的高度
  const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  //console.log((pageHeight - scrollTop)/windowHeight )
  //console.log("11111111111111")

  //console.log((scrollTop + windowHeight) / pageHeight);
  // 判断滚动条是否已滚动到页面底部
  if ((pageHeight - scrollTop)/windowHeight <= 1.32) {
    console.log('已经到达页面底部');
    return true;
  }else{
    return false;
  }
}

const watchScroll = ()=> {
  //let scrollTop =
  //    window.pageYOffset ||
  //    document.documentElement.scrollTop ||
  //    document.body.scrollTop;
  ////  当滚动超过 90 时，实现吸顶效果
  //if (scrollTop > 500 && !handleScroll()) {
  //  navBarFixed.value = true;
  //} else {
  //  navBarFixed.value = false;
  //}
  //  let ifHead = store.getters.getHeadVisible;
    let ifHead = introPicRefVisible.value;
    let ifFoot = store.getters.getFootVisible;
    if (!ifHead && !ifFoot) {
        navBarFixed.value = true;
    }else {
        navBarFixed.value = false;
    }
}

// 页面挂载
onMounted(()=>{
  window.addEventListener('scroll', watchScroll);
  //window.addEventListener('scroll', handleScroll);
})

onUnmounted(()=>{
  window.removeEventListener('scroll', watchScroll);
})

watch(introPicRefVisible,(newVal, oldVal)=>{
    console.log(newVal);
    if (!newVal.value && !store.getters.getFootVisible) {
        navBarFixed.value = true;
    }else {
        navBarFixed.value = false;
    }
},{
    //非惰性
    immediate: true,
    //深度监视
    deep: true
})

const myChange = (arr)=>{
  //console.log(arr);
  getBookByManyCondition(arr[0],arr[1],arr[2],arr[3],arr[4])
}

const getBookByManyCondition = (recV,typeV,priceMin,priceMax,scoreMax)=>{
    loading.value = true
    bookList.value = []
    axios.get('/book/condition/'+ recV + "/"
        + typeV + "/" + scoreMax
    //"/" + priceMin + "/" +  priceMax
    ).then(res => {
      //console.log(res.data.data);
        bookList.value = res.data.data;
        loading.value = false
    }).catch(error => {
      //ElMessage.error(error)
        loading.value = false
        ElMessage.info("请你先登录")
        router.push("/login")
    })
}

let pic = ref('')
const getPic = ()=>{
  axios.get('/pic/type').then(res => {
    //console.log(res.data.data);
    pic.value = res.data.data;
  }).catch(error => {
    ElMessage.error(error)
  })
}
getPic();

</script>

<style scoped>
.navBarWrap1 {
  position: fixed;
  top: 60px;
}
.navBarWrap2 {
  position: relative;
  left: 30px;
  top: 60px;
}
</style>
